<script lang="js" setup name="App">
import StudentTablePractice from './components/StudentTablePractice.vue';
import { RouterView } from 'vue-router';
import { RouterLink } from 'vue-router';
import { useRouter } from 'vue-router';

const router = useRouter()
// 等同对象 可以拿到我们定义的所有路由规则
</script>

<template>
   <div class="app">
      <div class="navigate">
        <router-link to="/student" active-class="active-class" replace="true">首页</router-link>
        <!-- replace 布尔类型防止回退 -->
        <!-- to第二种写法 冒号绑定后跟js表达式  :to="{path:'/home'}"  引号中可以传入对象，path中写路由路径 -->
         <!-- 栈 lifo 后进先出 默认push方式 -->
         <!-- 浏览器 fifo 先进先出  -->
        <router-link to="/article">文章</router-link>
        <router-link to="/about">关于</router-link>    
      </div>
      <div class="content">
        <!-- 一级路由展示区 -->
        <router-view></router-view>
     </div> 

       
      

   </div>
    <div>
      <StudentTablePractice />
    </div>
</template>

<style lang="css">

.app {
  display: flex;
}

.navigate {
  width: 30%;
  height: 100%;
}

a {
  margin: 10px;
}

.content {
  width: 70%;
  border : 1px solid #5a5a5a;
}
</style>
